<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
</head>
<body>
<div id="app">
<!--    1.v-on的使用-->
  <button v-on:click="fn">点击</button>
<!--    2.语法糖-->
    <button @click="fn1">点击</button>
<!--    3.当不加括号时，函数执行时第一个参数默认是$event事件对象-->
<!--    当加括号时需要传别的参数，并且还想要获取事件对象时，可以传入$event-->
    <button @click="fn2(1,$event)">点击</button>
</div>
<script>
    Vue.config.productionTip = false
    const vm = new Vue({
        el: '#app',
        data() {
            return {
            //    data是存放数据的地方，不推荐存放函数，在data中vue并没有处理函数的this问题
            }
        },
        methods:{
            //函数放到methods中，vue强调用户只需要操作数据，所以this是当前vm实例
            fn(){
                console.log('fn')
            },
            fn1(event){
                console.log(event,'fn')
            },
            fn2(a,event){
                console.log(a,event,'fn')
            }
        }
    })
</script>
</body>
</html>